<p>In this example we are going to extend the functionality of&nbsp;<a class="reference-link"
  href="#root/_help_xYjQUYhpbUEW">Task Manager</a>&nbsp;showcase (which comes
  by default with Trilium) by adding a button in the&nbsp;<a class="reference-link"
  href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>&nbsp; (
  <img src="New Task launcher button_i.png">) to create a new task automatically and open it.</p>
<h2>Creating the note</h2>
<ol>
  <li>First, create a new&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note
    type with the <em>JS frontend</em> language.</li>
  <li>Define the <code>#run=frontendStartup</code> label in&nbsp;<a class="reference-link"
    href="#root/_help_zEY4DaJG4YT5">Attributes</a>.</li>
</ol>
<h2>Content of the script</h2>
<p>Copy-paste the following script:</p><pre><code class="language-application-javascript-env-backend">api.addButtonToToolbar({
	title: "New task",
    icon: "task",
    shortcut: "alt+n",
    action: async () =&gt; {
    	const taskNoteId = await api.runOnBackend(() =&gt; {
        	const todoRootNote = api.getNoteWithLabel("taskTodoRoot");
            const resp = api.createTextNote(todoRootNote.noteId, "New task", "")           
            return resp.note.noteId;
        });
        
        await api.waitUntilSynced();
        await api.activateNewNote(taskNoteId);
    }
});</code></pre>
<h2>Testing the functionality</h2>
<p>Since we set the script to be run on start-up, all we need to do is to
  <a
  href="#root/_help_s8alTXmpFR61">refresh the application</a>.</p>
<h2>Understanding how the script works</h2>
<table class="ck-table-resized">
  <colgroup>
    <col>
      <col>
  </colgroup>
  <tbody>
    <tr>
      <td><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
	title: "New task",
    icon: "task",
    shortcut: "alt+n",
    action: async () =&gt; {
    	// [...]
    }
});</code></pre>
      </td>
      <td>
        <p>This uses the <a href="#root/_help_yIhgI5H7A2Sm">Front-end API</a> to create
          a icon in the&nbsp;<a class="reference-link" href="#root/_help_xYmIYSP6wE3F">Launch Bar</a>,
          by specifying:</p>
        <ul>
          <li>A title</li>
          <li>A corresponding boxicons icon (without the <code>bx-</code> prefix).</li>
          <li>Optionally, a keyboard shortcut to assign to it.</li>
          <li>The action, which will be executed when the button is pressed.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><pre><code class="language-application-javascript-env-frontend">const taskNoteId = await api.runOnBackend(() =&gt; {
    // Shown below.           
    return resp.note.noteId;
});</code></pre>
      </td>
      <td>
        <ul>
          <li>This portion of code is actually executed on the server (backend) and
            not on the client (i.e. browser).
            <ul>
              <li>The reason is that the creating notes is the responsibility of the server.</li>
            </ul>
          </li>
          <li>Here we can also see that it is possible to return results from the server
            execution and read them in the client (<code>taskNoteId</code>).</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><pre><code class="language-application-javascript-env-frontend">const todoRootNote = api.getNoteWithLabel("taskTodoRoot");</code></pre>
      </td>
      <td>
        <ul>
          <li>Here we identify a note with the <a href="#root/_help_zEY4DaJG4YT5">label</a>  <code>#taskTodoRoot</code>.
            This is how the&nbsp;<a class="reference-link" href="#root/_help_xYjQUYhpbUEW">Task Manager</a>&nbsp;showcase
            knows where to place all the different tasks.</li>
          <li>Normally this might return a <code>null</code> value if no such note could
            be identified, but error handling is outside the scope of this example.&nbsp;</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><pre><code class="language-application-javascript-env-frontend">const resp = api.createTextNote(todoRootNote.noteId, "New task", "")</code></pre>
      </td>
      <td>
        <ul>
          <li>We create a new child note within the to-do root note (first argument)
            with the title “New task" (second argument) and no content by default (third
            argument).</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><pre><code class="language-application-javascript-env-frontend">await api.waitUntilSynced();</code></pre>
      </td>
      <td>
        <ul>
          <li>Back on the client, since we created a new note on the server, we now
            need to wait for the change to be reflected in the client.</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><pre><code class="language-application-javascript-env-frontend">await api.activateNewNote(taskNoteId);</code></pre>
      </td>
      <td>
        <ul>
          <li>Since we know the <a href="#root/_help_m1lbrzyKDaRB">ID</a> of the newly
            created note, all we have to do now is to show this note to the user.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>